<template>
	<!--这里是抽奖转盘组件-->
	<div class="lottery-wrap-box">
		<!--报名抽奖组件-->
		<ApplyLottery v-if='isApplyLottery' :applyLotteryArrayData='applyLotteryArrayData' :activityId='activityId'
			@formChildMsg='formChildData' />
		<!--转盘组件-->
		<RotaryCom v-if='isRotaryCom' ref="rotteryComRef" :roomInfo='roomInfo' :activityId='activityId'
			:lotteryInfoObj='lotteryInfoObj' :applyAddLotteryNum='applyAddLotteryNum' :addDrawTimes='addDrawTimes'
			@formChildMsg='formChildData' />
		<!--抽奖规则组件-->
		<SweepstakesRules v-if='isSweepstakesRules' :activityId='activityId' @formChildMsg='formChildData' />
		<!--抽奖抽中组件-->
		<WinCom v-if='isWinCom' :winInfo='winInfo' :fromCom='fromCom' @formChildMsg='formChildData' />
		<!--抽奖未中奖组件-->
		<LosingCom v-if='isLosingCom' @formChildMsg='formChildData' />
		<!--中奖说明组件-->
		<WinExplain v-if='isWinExplain' :winInfo='winInfo' :roomInfo='roomInfo' :fromCom='fromCom'
			@formChildMsg='formChildData' />
		<!--填写领奖信息组件-->
		<AddPrizeInfoCom v-if='isAddPrizeInfoCom' :winInfo='winInfo' :fromCom='fromCom' :activityId='activityId'
			@formChildMsg='formChildData' />
		<!--增加抽奖机会组件-->
		<AddPrizeChangeCom v-if='isAddPrizeChangeCom' :addChangeInfo='addChangeInfo' @formChildMsg='formChildData' />
		<!--报错提示组件-->
		<ErrorTipCom v-if='isErrorTipCom' @formChildMsg='formChildData' />
		<!--进入直播间提示-->
		<transition name="showRect" @before-enter="TipUnBeforeEnter" @enter="TipUnEnter" @after-enter="TipUnAfterEnter"
			@before-leave="TipUnBeforeLeave" @leave="TipUnLeave" @after-leave="TipUnAfterLeave" :css="false">
			<div v-show="marqueeTipUnShow" class="marquee-tip">
				{{ WinPmdArray[WinPmdArrayIndex] }}
			</div>
		</transition>
	</div>
</template>

<script>
import RotaryCom from './rotaryCom';//转盘组件
import SweepstakesRules from './sweepstakesRules';//抽奖规则组件
import ApplyLottery from './applyLottery';//报名抽奖组件
import WinCom from './winCom';//抽中抽奖组件
import WinExplain from './winExplain';//中奖说明组件
import LosingCom from './losingCom';//抽奖未中奖组件addPrizeInfoCom.vue
import AddPrizeInfoCom from './addPrizeInfoCom';//填写领奖信息组件
import AddPrizeChangeCom from './addPrizeChangeCom';//增加抽奖机会组件
import ErrorTipCom from './errorTipCom';//错误提示组件
export default {
	props: {
		roomInfo: Object,
		//activityId:String,//抽奖活动id
		startLotteryObj: Object,
		fromCom: String,//来自哪个组件
		winInfoData: Object,//mine  单个中奖信息
	},
	data() {
		return {
			isApplyLottery: false,
			isSweepstakesRules: false,
			isRotaryCom: false,
			isWinExplain: false,
			isWinCom: false,
			isLosingCom: false,
			isAddPrizeInfoCom: false,
			isAddPrizeChangeCom: false,
			isErrorTipCom: false,
			roomId: this.$route.params.roomid, //房间id
			lotteryInfoObj: null,//抽奖信息
			winInfo: {},//抽中中奖信息
			winExplainText: "",//中奖说明文本
			roomInfo: this.roomInfo,
			activityId: '',//抽奖活动id
			addChangeInfo: {},//增加抽奖返回数据
			addDrawTimes: '',//抽奖增加的次数
			applyAddLotteryNum: '',//报名增加抽奖次数
			WinPmdArray: [],
			liveRoomInterval: '',
			marqueeTipUnShow: false, // 动画的执行与不执行
			WinPmdArrayIndex: 0,
			applyLotteryArrayData: [],//报名抽奖数组
		}
	},
	components: {
		SweepstakesRules,//抽奖规则组件
		RotaryCom,//转盘组件
		ApplyLottery,//报名抽奖组件
		WinCom,//抽中抽奖组件
		WinExplain,//中奖说明组件
		LosingCom,//抽奖未中奖组件
		AddPrizeInfoCom,//填写领奖信息组件
		AddPrizeChangeCom,//增加抽奖机会组件
		ErrorTipCom,//错误提示组件
	},
	watch: {
		winInfoData() {
			this.winInfo = this.winInfoData;
			this.isWinCom = true
		}
	},
	created() {
		if (this.fromCom == 'fromMinePrizeCom') {//来自mine的组件弹出 中奖信息
			this.winInfo = this.winInfoData;
			this.isWinCom = true
		} else if (this.fromCom == 'fromLivePrizeCom') {//来自直播间
			this.activityId = this.startLotteryObj.activityId;
			//判断抽奖需不需要报名  drawRange 抽奖范围 0 全部用户 ，1 报名用户 2 指定用户
			this.getLottoPrizes();//获取转盘信息
			this.getWinPmdData();//获取抽奖跑马灯数据
			//          	 if(this.startLotteryObj.drawRange=='1'){//要报名
			//	            	this.isApplyLottery = true
			//	            }else if(this.startLotteryObj.drawRange=='0'){//全部用户
			//	            	this.getLottoPrizes()
			//	            }
		}

	},
	destroyed() { //组件销毁
		clearInterval(this.liveRoomInterval); //清楚定时器
	},
	methods: {
		setIntervalLiveRoom() {
			this.liveRoomInterval = setInterval(this.setInterFun, 3000);
		},
		setInterFun: function () {
			if (this.WinPmdArray.length > 0) {
				this.marqueeTipUnShow = true
			}
		},
		TipUnBeforeEnter(el) {
			el.style.opacity = 0.2;
		},
		TipUnEnter(el, done) {
			let _this = this
			Velocity(
				el, {
				opacity: 1,
				translateY: -30,
			}, {
				duration: 600,
				easing: "ease-in-out",
				complete: done
			}
			);
		},
		TipUnAfterEnter(el, done) {
			Velocity(
				el, {
				opacity: 1
			}, {
				duration: 200,
				complete: done
			}
			);
			Velocity(
				el, {
				opacity: 0
			}, {
				duration: 300,
				complete: done
			}
			);
			setTimeout(() => {
				this.WinPmdArrayIndex++;
				if (this.WinPmdArrayIndex == this.WinPmdArray.length) {
					this.WinPmdArrayIndex = 0;
				}
				this.marqueeTipUnShow = false;
			}, 1100)
		},
		TipUnBeforeLeave(el, done) {
			Velocity(
				el, {
				translateY: 0,
			}, {
				duration: 100,
				complete: done
			}
			);
		},
		TipUnLeave(el, done) {
		},
		//中奖跑马灯
		getWinPmdData() {
			this.$http.get("/lotto/getWinsLamp?activityId=" + this.activityId).then(res => {
				if (res.data.code == "000000") {
					if (res.data.data.length) {
						this.WinPmdArray = res.data.data;
						this.setIntervalLiveRoom(); //房间定时器
					}
				} else {
					console.log('获取抽奖中奖跑马灯数据失败');
				}
			})
				.catch(response => {
					console.log(response);
				});
		},
		formChildData(data) {
			switch (data.type) {
				case 'minePrizeLiveList'://我的奖品列表
					this.$emit('formChildMsg', {
						type: 'minePrizeLiveList',
						data: 'ruan'
					})
					break;
				case 'openlotteryErrorTipCom'://打开错误提示组件
					this.isErrorTipCom = true;
					break;
				case 'closeTurntable'://关闭抽奖转盘组件
					this.$emit('formChildMsg', {
						type: 'closeAllPrizeCom',
						data: 'ruan'
					})
					break;
				case 'lotteryRule'://打开抽奖规则
					this.isSweepstakesRules = true;
					break;
				case 'closeLotteryRule'://关闭抽奖规则
					this.isSweepstakesRules = false;
					break;
				case 'lotteryResult'://抽奖结果
					if (data.data.prizeType == '0') {//0 谢谢参与 1 实物 2.券码
						this.isLosingCom = true
					} else {
						this.winInfo = data.data;
						this.isWinCom = true;
					}
					break;
				case 'closeLosingCom'://关闭未中奖组件
					this.isLosingCom = false;
					break;
				case 'winExplainType'://打开中奖说明
					this.isWinExplain = true
					break;
				case 'closeWinExplain'://关闭中奖说明
					this.isWinExplain = false;
					break;
				case 'closeFooterWinExplain'://点击中奖说明下面的X
					if (this.fromCom == 'fromMinePrizeCom') {//来自mine的组件弹出 中奖信息
						//关闭整个组件
						this.$emit('formChildMsg', {
							type: 'closeAllPrizeCom',
							data: 'ruan'
						})
						this.isAddPrizeInfoCom = false;
					} else if (this.fromCom == 'fromLivePrizeCom') {//来自直播间
						this.isWinExplain = false;
						this.isWinCom = false;
					}
					break;
				case 'addPrizeInfo'://打开填写领奖信息
					this.isAddPrizeInfoCom = true;
					break;
				case 'closeAddPrizeInfo'://关闭填写领奖信息
					this.isAddPrizeInfoCom = false;
					break;
				case 'closeWinCom'://关闭中奖页面
					if (this.fromCom == 'fromMinePrizeCom') {//来自mine的组件弹出 中奖信息
						//关闭整个组件
						this.$emit('formChildMsg', {
							type: 'closeAllPrizeComNoRefreshPage',
							data: 'ruan'
						})
						this.isAddPrizeInfoCom = false;
					} else if (this.fromCom == 'fromLivePrizeCom') {//来自直播间
						this.isWinCom = false;
					}
					break;
				case 'addChange'://增加抽奖机会
					this.getAddChangeData()
					break;
				case 'closeAddPrizeChangeCom'://关闭增加抽奖机会
					this.isAddPrizeChangeCom = false;
					break;
				case 'applyLotterySuccess'://报名抽奖返回成功 打开转盘抽奖
					this.isApplyLottery = false;
					this.lotteryInfoObj.drawRange = '0';//更改数据不需要报名
					if (data.data > 0) {
						this.applyAddLotteryNum = data.data;//报名增加的抽奖次数
					}
					//this.$refs.rotteryComRef.discAnimationStart()
					//this.getLottoPrizes()
					//console.log('报名抽奖返回成功 打开转盘抽奖')
					break;
				case 'openApplyLottery'://打开报名抽奖
					this.isApplyLottery = true;
					break;
				case 'closeApplyLottery'://关闭报名抽奖
					this.$emit('formChildMsg', {
						type: 'closeAllPrizeCom',
						data: 'ruan'
					})
					break;
				case 'openInviteCard'://打开邀请卡
					fun.shareDotNumFun({...this.roomInfo.roomInfo,fromTypeLiveBack:'live'});//邀请打点
					this.$emit("formChildMsg", {
						type: "shareLive",
						data: 'ruan'
					});
					this.isAddPrizeChangeCom = false;
					break;
				case 'closeAddPrizeAndWinCom':// 填写领奖信息提交成功  关闭填写领奖信息以及中奖页面
					if (this.fromCom == 'fromMinePrizeCom') {//来自mine的组件弹出 中奖信息
						//关闭整个组件
						this.$emit('formChildMsg', {
							type: 'closeAllPrizeCom',
							data: 'ruan'
						})
						this.isAddPrizeInfoCom = false;
					} else if (this.fromCom == 'fromLivePrizeCom') {//来自直播间
						this.isAddPrizeInfoCom = false;
						this.isWinCom = false;
					}
					break;
				default:
					break;
			}
		},
		getAddChangeData() {//增加抽奖机会接口
			this.$http.get("/lotto/userInvite?roomId=" + this.roomId + "&activityId=" + this.activityId).then(res => {
				if (res.data.code == "000000") {
					this.addChangeInfo = res.data.data;
					this.isAddPrizeChangeCom = true;
					//res.data.data.addDrawTimes = 5;
					if (res.data.data.addDrawTimes) {//增加的次数
						this.addDrawTimes = res.data.data.addDrawTimes
					}
					//fun.toastMessage('调用增加抽奖机会接口');
					//addDrawTimes//增加的次数
					//inviteNum//邀请的数量
					//unitDrawTimes//初始化次数
					//unitInviteNum//初始化数量
				} else {
					console.log('调用增加抽奖机会接口报错');
				}
			})
				.catch(response => {
					console.log(response);
				});
		},
		getLottoPrizes() {//获取转盘信息
			this.$http.get("/lotto/getLottoPrizes?roomId=" + this.roomId + "&activityId=" + this.activityId).then(res => {
				if (res.data.code == "000000" && res.data.data !== null) {
					this.lotteryInfoObj = res.data.data;
					this.applyLotteryArrayData = res.data.data.lottoUserApplyCol;
					this.isRotaryCom = true;
				} else {
					console.log('获取转盘信息', res.data)
				}
			})
				.catch(response => {
					console.log(response);
				});
		}
	}
}
</script>

<style scoped="scoped" lang="less">
.lottery-wrap-box {
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, .4);
	margin: 0 auto;
	position: absolute;
	z-index: 1010;
	top: 0;
	left: 0;
}

.marquee-tip {
	position: absolute;
	top: 330px;
	left: 16px;
	z-index: 1011;
	max-width: 350px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	background: black;
	color: #FFFFFF;
	padding: 8px 11px;
	border-radius: 18px;
	font-size: 22px;
}</style>
